<template>
  <view class="goods-list">
    <my-goods v-for="(item, i) in goodsList" :key="i" :goods="item" @click="gotoGoodsDetail(item)"></my-goods>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 页面状态数据
        isLoading: false, // 页面数据是否请求完成


        // 请求参数
        queryObj: {
          query: '', // 列表查询参数
          cid: '', // 商品分类id
          pagenum: 1, // 第一页
          pagesize: 10 // 每页10条
        },

        // 商品列表
        goodsList: [], // 商品列表
        total: 0 // 总条数
      };
    },

    
    
    onLoad(options) {
      console.log(options)
      // 初始化列表查询参数
      this.queryObj.query = options.query || '' // 首页 -> 商品列表
      this.queryObj.cid = options.cid || '' // 分类页 -> 商品列表

      // 发请求 - 获取商品列表
      this.getGoodsList()
    },

    // 上拉加载更多
    onReachBottom() {
      console.log('到底了')
      // 判断上次数据是否返回 true - 未返回  false - 已返回
      if(this.isLoading) return
      console.log('到底了, 请求数据')
      
      // 判断数据是否加载完
      if(this.goodsList.length === this.total) return uni.$showMsg('没有更多了')
      // 请求数据
      // 修改请求参数
      this.queryObj.pagenum += 1
      // 发起请求
      this.getGoodsList()
    },

    // 下拉刷新
    onPullDownRefresh() {
      // 重置页面参数
      this.isLoading = false
      this.queryObj.pagenum = 1
      this.queryObj.pagesize= 10
      this.goodsList = []
      this.total = 0
      
      // 发请求
      this.getGoodsList(() => uni.stopPullDownRefresh())
    },
    
    methods: {
      // 获取商品列表
      async getGoodsList(callback) {
        try {
          this.isLoading = true
          const {
            data: res
          } = await uni.$http.get('/goods/search', this.queryObj)
          this.isLoading = false
          
          callback && callback()
          // 请求失败
          if (res.meta.status !== 200) return uni.$showMsg()

          // 请求成功 - 数据赋值
          this.goodsList = [...this.goodsList, ...res.message.goods]
          this.total = res.message.total
        } catch (err) {
          //TODO handle the exception
          this.isLoading = false
        }
      },
      
      // 点击商品, 跳转到商品详情页
      gotoGoodsDetail(item) {
        uni.navigateTo({
          url: `/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`
        })
      },
      
    }
  }
</script>

<style lang="scss">
  .goods-list {
    border: 1rpx solid #efefef;
    margin: 0 8rpx;
  }
</style>
